Web разработка

0:23

This media is not supported in your browser

VIEW IN TELEGRAM

Адаптивная анимация прокрутки CSS с повторно используемыми ключевыми кадрами 🔥

p { --from: 0 100%; --to: 0 -100%; }
.tile { --to: 0 -150%; }
@​keyframes move {
  0% { translate: var(--from); }
  100% { translate: var(--to); }
}
p, .tile {
  animation: move;
  animation-timeline: --section;
  animation-range: entry 20% 120%;
}

@htmlcssjavas

www.tg-me.com/hk/Web разработка/com.htmlcssjavas/942

889 viewsApr 4, 2024 at 07:59

Адаптивная анимация прокрутки CSS с повторно используемыми ключевыми кадрами 🔥

p { --from: 0 100%; --to: 0 -100%; }
.tile { --to: 0 -150%; }
@​keyframes move {
  0% { translate: var(--from); }
  100% { translate: var(--to); }
}
p, .tile {
  animation: move;
  animation-timeline: --section;
  animation-range: entry 20% 120%;
}

BY Web разработка